<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-title">加油记录详情</view>
			<view style="width: 70rpx;"></view>
		</view>

		<!-- 驾驶员信息 -->
		<view class="card">
			<view class="driver-info">
				<view class="driver-avatar">{{ driverInitial }}</view>
				<view class="driver-details">
					<view class="driver-name">
						{{ record.driverinfo.name }}
						<view class="status-badge">状态正常</view>
					</view>
					<view class="driver-info-row">
						<view class="driver-label">电话</view>
						<view>{{ record.driverinfo.mobile }}</view>
					</view>
					<view class="driver-info-row">
						<view class="driver-label">车牌</view>
						<view>{{ record.driverinfo.license }}</view>
					</view>
					<view class="driver-info-row">
						<view class="driver-label">车型</view>
						<view>{{ record.driverinfo.model }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加油费用 -->
		<view class="card">
			<view class="card-header">
				<uni-icons class="card-header-icon" type="money" size="18"></uni-icons>
				加油费用
			</view>
			<view class="card-body">
				<view class="cost-display">
					<view class="cost-label">本次加油总花费</view>
					<view>
						<text class="cost-value">{{ record.cost }}</text>
						<text class="cost-unit">元</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加油信息 -->
		<view class="card">
			<view class="card-header">
				<uni-icons class="card-header-icon" type="refund" size="18"></uni-icons>
				加油信息
			</view>
			<view class="card-body">
				<view class="info-grid">
					<view class="info-item">
						<view class="info-label">加油量</view>
						<view class="info-value">{{ record.fuelAmount }} 升</view>
					</view>
					<view class="info-item">
						<view class="info-label">燃油类型</view>
						<view class="info-value">
							{{ fuelTypeText }}
							<view class="fuel-type-badge">{{ record.fuelType === 0 ? '92#' : '95#' }}</view>
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">即时油价</view>
						<view class="info-value">{{ record.currentPrice }} 元/升</view>
					</view>
					<view class="info-item">
						<view class="info-label">当前里程</view>
						<view class="info-value">{{ record.currentMileage }} 公里</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加油凭证 -->
		<view class="card">
			<view class="card-header">
				<uni-icons class="card-header-icon" type="image" size="18"></uni-icons>
				加油凭证
			</view>
			<view class="card-body">
				<view class="image-section">
					<view class="image-card" @click="previewImage(record.fuelthumb)">
						<image :src="record.fuelthumb" mode="aspectFill"></image>
						<view class="image-label">加油凭证照片</view>
					</view>
					<view class="image-card" @click="previewImage(record.milethumb)">
						<image :src="record.milethumb" mode="aspectFill"></image>
						<view class="image-label">里程表照片</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 记录时间 -->
		<view class="card">
			<view class="card-header">
				<uni-icons class="card-header-icon" type="calendar" size="18"></uni-icons>
				记录时间
			</view>
			<view class="card-body">
				<view class="timeline">
					<view class="timeline-item">
						<view class="timeline-dot"></view>
						<view class="timeline-date">{{ formattedDate }}</view>
						<view class="timeline-time">{{ formattedTime }}</view>
					</view>
				</view>
			</view>
			<uni-fab ref="fab" horizontal="right" vertical="bottom"
				:pattern="{icon:'compose', color: '#fff', backgroundColor: '#1890ff', selectedColor: '#fff'}" @fabClick="fabClick" />
		</view>

		<view class="footer-note">
			记录编号: {{ record.driverinfo._id }} | 数据更新于 {{ record.create_date }}
		</view>
	</view>
</template>

<script>
	function parseDate(dateStr) {
		// 替换 '-' 为 '/'，适配 iOS
		return new Date(dateStr.replace(/-/g, '/'));
	}
	export default {
		data() {
			return {
				record: {
					driverinfo: {}, // 确保 driverinfo 存在
					fuelthumb: '',
					milethumb: '',
					create_date: ''
				}
			}
		},

		computed: {
			driverInitial() {
				if (this.record && this.record.driverinfo && this.record.driverinfo.name) {
					return this.record.driverinfo.name.charAt(0);
				}
				return '';
			},
			fuelTypeText() {
				return this.record.fuelType === 0 ? '92号汽油' : '95号汽油';
			},
			formattedDate() {
				if (!this.record.create_date) return '';
				const date = parseDate(this.record.create_date);
				return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
			},
			formattedTime() {
				if (!this.record.create_date) return '';
				const date = parseDate(this.record.create_date);
				return `${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`;
			}
		},
		onLoad() {
			this.record = uni.$router.params.record
			// console.log(this.record, '1111111')
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			padZero(num) {
				return num.toString().padStart(2, '0');
			},
			fabClick() {
				if (!this.record || !this.record._id) return
				uni.$router.to({
					url: '/pagesC/driver/fuel/edit',
					params: {
						_id: this.record._id
					}
				})
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Noto Sans SC', -apple-system, sans-serif;
	}

	page {
		background-color: #f7f9fc;
		color: #333;
		padding: 0;
		line-height: 1.6;
		height: 100%;
	}

	.container {
		padding: 20rpx 30rpx 40rpx;
		max-width: 800px;
		margin: 0 auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		background: linear-gradient(135deg, #3498db, #1a5276);
		color: white;
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0 8rpx 24rpx rgba(52, 152, 219, 0.2);
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.header::before {
		content: '';
		position: absolute;
		top: -70rpx;
		right: -70rpx;
		width: 200rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 600;
		position: relative;
		z-index: 2;
	}

	.back-btn {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
		z-index: 2;
	}

	.card {
		background: white;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
		overflow: hidden;
		position: relative;
	}

	.card-header {
		padding: 30rpx 30rpx 25rpx;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		font-weight: 500;
		color: #3498db;
		font-size: 32rpx;
	}

	.card-header-icon {
		margin-right: 15rpx;
		font-size: 36rpx;
	}

	.card-body {
		padding: 30rpx;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-label {
		font-size: 26rpx;
		color: #7f8c8d;
		margin-bottom: 10rpx;
	}

	.info-value {
		font-size: 32rpx;
		font-weight: 500;
		color: #2c3e50;
		display: flex;
		align-items: center;
	}

	.cost-display {
		text-align: center;
		padding: 40rpx 0;
	}

	.cost-label {
		font-size: 28rpx;
		color: #7f8c8d;
		margin-bottom: 10rpx;
	}

	.cost-value {
		font-size: 72rpx;
		font-weight: 700;
		color: #e74c3c;
		line-height: 1.2;
	}

	.cost-unit {
		font-size: 36rpx;
		font-weight: 500;
		color: #95a5a6;
		margin-left: 10rpx;
	}

	.image-section {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
		margin-top: 20rpx;
	}

	.image-card {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		position: relative;
	}

	.image-card img {
		width: 100%;
		height: 300rpx;
		display: block;
		object-fit: cover;
	}

	.image-label {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.6);
		color: white;
		padding: 20rpx;
		font-size: 26rpx;
		text-align: center;
	}

	.timeline {
		position: relative;
		padding: 30rpx 0 20rpx 60rpx;
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 20rpx;
		top: 0;
		bottom: 0;
		width: 4rpx;
		background: #3498db;
	}

	.timeline-item {
		position: relative;
		margin-bottom: 40rpx;
	}

	.timeline-dot {
		position: absolute;
		left: -40rpx;
		top: 10rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: #3498db;
		border: 6rpx solid #e1f0fa;
	}

	.timeline-date {
		font-size: 32rpx;
		font-weight: 500;
		color: #2c3e50;
		margin-bottom: 10rpx;
	}

	.timeline-time {
		font-size: 28rpx;
		color: #7f8c8d;
	}

	.driver-info {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.driver-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #3498db, #2c3e50);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 48rpx;
		font-weight: 600;
		margin-right: 30rpx;
	}

	.driver-details {
		flex: 1;
	}

	.driver-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
	}

	.driver-info-row {
		display: flex;
		font-size: 28rpx;
		color: #7f8c8d;
		margin-bottom: 10rpx;
	}

	.driver-label {
		width: 100rpx;
		color: #95a5a6;
	}

	.status-badge {
		display: inline-block;
		padding: 6rpx 20rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		background: #e8f6ff;
		color: #3498db;
		margin-left: 20rpx;
	}

	.fuel-type-badge {
		display: inline-block;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
		background: #fef9e7;
		color: #f39c12;
		margin-left: 15rpx;
	}

	.footer-note {
		text-align: center;
		font-size: 26rpx;
		color: #95a5a6;
		margin-top: 40rpx;
		padding: 20rpx;
	}

	/* 响应式调整 */
	@media (max-width: 600px) {
		.container {
			padding: 20rpx;
		}

		.header {
			padding: 20rpx 25rpx;
			border-radius: 20rpx 20rpx 0 0;
		}

		.header-title {
			font-size: 32rpx;
		}

		.info-grid {
			grid-template-columns: 1fr;
			gap: 25rpx;
		}

		.cost-value {
			font-size: 64rpx;
		}

		.image-section {
			grid-template-columns: 1fr;
		}
	}
</style>